<template>
    <div class="">

        <h1>jsApi支付</h1>
        <button @click="goPay">支付0.01元</button>
    </div>
</template>

<script>
import axios from 'axios';
const serveHost = 'http://www.bufantec.com';
export default {
    components: {

    },
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        
    },
    methods: {
        goPay(){
            // 1. 获取openId
            var openId = window.localStorage.getItem('openid');
            if(!openId || openId == 'undefined') {
                // 模拟支付发现未登录 引导登陆的场景
                this.$router.push('/home');
            }
        //    1. 发送请求生成支付订单 
            // 支付的api /wx/pay/paySign 
            // 问题: openId如何获取?
            var url = `${serveHost}/wx/pay/paySign?openId=${openId}`;
            axios.get(url)
                .then(res=>{
                    var resObj = JSON.parse(res.data.data);
                    console.log('支付请求:',resObj);
                    // 用返回的内容 唤醒微信支付组建
                    this.initJsApiPay(resObj);
                })
        },
        initJsApiPay(option){

            WeixinJSBridge.invoke(
                // 往往会在这个地方出错!!! 这里很可能是后台签名出错了
                'getBrandWCPayRequest', {
                    // "appId": option.appId,     //公众号名称，由商户传入     
                    // "timeStamp":option.timeStamp,         //时间戳，自1970年以来的秒数     
                    // "nonceStr":option.nonceStr,   //随机串     
                    // "package":option.package,      
                    // "signType":option.signType,       //微信签名方式：     
                    // "paySign":option.paySign  //微信签名 
                    ...option
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            alert('支付成功!');
                            // 实际开发中,需要再次发送请求到后台,让后台主动查询当前支付的状态!
                    } 
            }); 
        }
    },
};
</script>

<style scoped lang="scss">

</style>

